<!-- DC KenBurns Caption Slider CSS -->
<link rel="stylesheet" type="text/css" href="dreamcodes/sliders/kbcaption-slider/css/kenburns-caption-settings.css" media="screen" />
<!-- DC Javascript Library -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->
<script type="text/javascript" src="dreamcodes/jquery.easing.js"></script> <!-- jQuery Easing (do not call twice on same page) -->
<!-- DC KenBurns Caption Slider JS -->
<script type="text/javascript" src="dreamcodes/sliders/kbcaption-slider/js/jquery.waitforimages.js"></script>
<script type="text/javascript" src="dreamcodes/sliders/kbcaption-slider/js/jquery.cssAnimate.mini.js"></script>
<script type="text/javascript" src="dreamcodes/sliders/kbcaption-slider/js/jquery.touchwipe.min.js"></script>
<script type="text/javascript" src="dreamcodes/sliders/kbcaption-slider/js/jquery.templateaccess.kenburns-caption.min.js"></script>
<!-- DC KenBurns Caption Slider Settings -->
<script type="text/javascript">
$(function() {
$('#kbcaption-1').kenburn({
width:960, // width of slider
height:350, // height of slider
thumbWidth:120, // thumbnail width
thumbHeight:70, // thumbnail height
thumbAmount:6,
thumbSpaces:0,
thumbPadding:9,
thumbStyle:"thumb", // thumbnail style: thumb, bullet, none, both
bulletXOffset:0,
bulletYOffset:0,
shadow:'true', // cast shadows over thumbnails: false, true
touchenabled:'on', // allow touch swipe (suitable for mobile devices): on, off
pauseOnRollOverThumbs:'off', // pause slider when mouse over thumbnail
pauseOnRollOverMain:'on', // pause slider when mouse over slider
preloadedSlides:2, // number of slides to preload during startup
timer:5, // time before next slide (5 = 5 seconds)
debug:"off",
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Google Fonts !! //
// local GoogleFont JS from your server: http://www.yourdomain.com/kb-plugin/js/jquery.googlefonts.js //
// GoogleFonts from Original Source: http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js or https:... //
// //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
googleFonts:'PT+Sans+Narrow:400,700',
googleFontJS:'dreamcodes/sliders/kbcaption-slider/js/jquery.googlefonts.js'
});
});
</script>
<!-- DC KenBurns Caption Slider Start -->
<div class="bannerholder">
<!-- <div id="kbcaption-1" class="light"> light theme -->
<div id="kbcaption-1" class="dark">
<ul>
<!-- Slide 1 -->
<li data-transition="fade" data-startalign="right,bottom" data-zoom="in" data-zoomfact="3" data-endAlign="center,top" data-panduration="12" data-colortransition="4">
<img alt="" src="dreamcodes/sliders/kbcaption-slider/images/image1.jpg" data-bw="dreamcodes/sliders/kbcaption-slider/images/image1_blur.jpg" data-thumb="dreamcodes/sliders/kbcaption-slider/images/thumb1.jpg" data-thumb_bw="dreamcodes/sliders/kbcaption-slider/images/thumb1_blur.jpg">
<div class="creative_layer">
<div class="caption_green wipeleft" style="top:130px;left:50px;"><i>TemplateAccess </i></div>
<div class="caption_transparent wipedown" style="top:180px;left:50px;">The Ultimate Ken Burns Slider</div>
<div class="caption_white minicap wipeup" style="top:230px;left:210px"><i>Caption styles are </i> completely <b>customizable</b>.</div>
</div>
</li>
<!-- Slide 2 -->
<li data-transition="slide" data-startalign="center,top" data-zoom="out" data-zoomfact="1" data-endAlign="left,bottom" data-panduration="15" data-colortransition="4">
<img alt="" src="dreamcodes/sliders/kbcaption-slider/images/image2.jpg" data-bw="dreamcodes/sliders/kbcaption-slider/images/image2_blur.jpg" data-thumb="dreamcodes/sliders/kbcaption-slider/images/thumb2.jpg" data-thumb_bw="dreamcodes/sliders/kbcaption-slider/images/thumb2_blur.jpg">
<div class="video_container">
<div class="video_container_wrap">
<iframe class="video_clip" src="http://player.vimeo.com/video/4749536?title=0&byline=0&portrait=0" width="569" height="320"></iframe>
<h2>Vimeo Video</h2>
<p>
Short CG animation about a kid and a toy shop.
</p>
<p>
<strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.
</p>
<a class="buttonlight" href="http://www.vimeo.com" target="_blank">Visit Website</a>
<div class="close"></div>
</div>
</div>
<div class="creative_layer">
<div class="caption_blue wipeleft" style="top:120px;left:570px;">Vimeo</div>
<div class="caption_black wiperight" style="top:120px;left:680px;">Support</div>
<div class="caption_transparent minicap wipeup" style="top:180px;left:626px;">Click the play button</div>
</div>
</li>
<!-- Slide 3 -->
<li data-transition="slide" data-startalign="left,bottom" data-zoom="in" data-zoomfact="3" data-endAlign="center,center" data-panduration="8" data-colortransition="4">
<img alt="" src="dreamcodes/sliders/kbcaption-slider/images/image3.jpg" data-bw="dreamcodes/sliders/kbcaption-slider/images/image3_blur.jpg" data-thumb="dreamcodes/sliders/kbcaption-slider/images/thumb3.jpg" data-thumb_bw="dreamcodes/sliders/kbcaption-slider/images/thumb3_blur.jpg">
<div class="creative_layer">
<div class="caption_transparent wipedown" style="top:75px;left:50px;">Some of Burner's Options:</div>
<div class="caption_black smallcap wipeleft" style="top:135px;left:50px">Image And Thumbs Fully Resizable</div>
<div class="caption_black smallcap wipeleft" style="top:173px;left:50px">Customizable Ken Burns Effect</div>
<div class="caption_black smallcap wipeleft" style="top:211px;left:50px">Freely Positionable and Stylable Captions</div>
<div class="caption_black smallcap wipeleft" style="top:249px;left:50px">High Browser Compatibility!</div>
</div>
</li>
<!-- Slide 4 -->
<li data-transition="fade" data-startalign="right,center" data-zoom="out" data-zoomfact="1.3" data-endAlign="left,center" data-panduration="11" data-colortransition="4">
<img alt="" src="dreamcodes/sliders/kbcaption-slider/images/image4.jpg" data-bw="dreamcodes/sliders/kbcaption-slider/images/image4_blur.jpg" data-thumb="dreamcodes/sliders/kbcaption-slider/images/thumb4.jpg" data-thumb_bw="dreamcodes/sliders/kbcaption-slider/images/thumb4_blur.jpg">
<div class="creative_layer">
<div class="caption_transparent wipedown" style="top:50px;left:50px;">Features:</div>
<div class="caption_black smallcap wipeleft" style="top:105px;left:50px">Touch swipe for iOS/Android/Windows 8 devices</div>
<div class="caption_black smallcap wipeleft" style="top:145px;left:50px">Small file size</div>
<div class="caption_orange wipeup" style="top:210px;left:100px;">Captions can be positioned freely</div>
<div class="caption_transparent wipedown" style="top:265px;left:100px;"><a href="http://www.bing.com" target="_blank">Supports URLs too! Goto: Bing Search</a></div>
</div>
</li>
<!-- Slide 5 -->
<li data-transition="fade" data-startalign="center,top" data-zoom="in" data-zoomfact="1.6" data-endAlign="center,bottom" data-panduration="12" data-colortransition="4">
<img alt="" src="dreamcodes/sliders/kbcaption-slider/images/image5.jpg" data-bw="dreamcodes/sliders/kbcaption-slider/images/image5_blur.jpg" data-thumb="../sliders/kbcaption-slider/images/thumb5.jpg" data-thumb_bw="dreamcodes/sliders/kbcaption-slider/images/thumb5_blur.jpg">
<div class="video_container">
<div class="video_container_wrap">
<iframe class="video_clip" src="http://www.youtube.com/embed/FG0fTKAqZ5g?hd=1&wmode=opaque&autohide=1&showinfo=0" height="320" width="569"></iframe>
<h2>YouTube</h2>
<p>
Sample YouTube Video.
</p>
<p>
<strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.
</p>
<a class="buttonlight" href="http://www.youtube.com" target="_blank">More Info</a>
<div class="close"></div>
</div>
</div>
<div class="creative_layer">
<div class="caption_red wipeleft" style="top:140px;left:40px;"><a href="#">YouTube</a></div>
<div class="caption_white wiperight" style="top:140px;left:180px;">Support</div>
<div class="caption_transparent minicap wipeup" style="top:200px;left:75px;">Click the play button</div>
</div>
</li>
<!-- Slide 6 -->
<li data-transition="slide" data-startalign="center,center" data-zoom="in" data-zoomfact="2" data-endAlign="center,center" data-panduration="15" data-colortransition="4">
<img alt="" src="dreamcodes/sliders/kbcaption-slider/images/image6.jpg" data-bw="dreamcodes/sliders/kbcaption-slider/images/image6_blur.jpg" data-thumb="dreamcodes/sliders/kbcaption-slider/images/thumb6.jpg" data-thumb_bw="dreamcodes/sliders/kbcaption-slider/images/thumb6_blur.jpg">
<div class="creative_layer">
<div class="caption_black nobg largecap wiperight" style="top:130px;left:100px;">Add Anything </div>
<div class="caption_black nobg largecap wipeleft" style="top:110px;left:620px;">You Want! </div>
</div>
</li>
<!-- Slide 7 -->
<li data-transition="slide" data-startalign="left,bottom" data-zoom="in" data-zoomfact="2" data-endAlign="center,center" data-panduration="15" data-colortransition="4">
<img alt="" src="dreamcodes/sliders/kbcaption-slider/images/image7.jpg" data-bw="dreamcodes/sliders/kbcaption-slider/images/image7_blur.jpg" data-thumb="dreamcodes/sliders/kbcaption-slider/images/thumb7.jpg" data-thumb_bw="dreamcodes/sliders/kbcaption-slider/images/thumb7_blur.jpg">
<div class="creative_layer">
<div class="caption_transparent minicap wipeup" style="top:230px;left:330px;">Supports Anchor Links. Visit: <b><a href="http://www.bing.com" target="_blank">Bing Search</a> | <a href="http://www.templateaccess.com" target="_blank">TemplateAccess</a></b></div>
</div>
</li>
</ul>
</div> <!-- /kbcaption-1 -->
</div> <!-- /bannerholder -->
<!-- DC KenBurns Caption Slider End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->